<!DOCTYPE html>
<html lang="en" style="background-color: #F5F5F5;">
<head>
	<meta charset="UTF-8">
	<title>仿小米商城-手机</title>
	<link href="./images/mi.ico" rel="icon" type="image/x-icon"/>
	<script type="text/javascript" src="./jQuery/jquery-3.1.0.min.js"></script>
	<script>
		$(function(){
               //获取购物车鼠标移入事件
               $("div.site-topbar-right ul li.gou").mouseover(function(){
                    //将其垂直高度设为0；显示当前的
                    $("div.site-topbar-right-gou").css({"z-index":1});
                    $("div.site-topbar-right-gou").show();
               });
            });
		$(function(){
               //获取购物车鼠标移出弹出层事件
               $("div.site-topbar-right-gou").mouseout(function(){
                    //隐藏当前的
                    $("div.site-topbar-right-gou").hide();
               });
            });
		$(function(){
               //获取商品顶部鼠标移入事件
               $("div.header1 ul li").mouseover(function(){
                    //将其垂直高度设为0；显示当前的
                    $("div.header1-1").css({"z-index":2});
                    $("div.header1-1").show();
               });
            });
		$(function(){
               //获取商品顶部鼠标移出弹出层事件
               $("div.header1-1").mouseleave(function(){
                    //隐藏当前的
                    $("div.header1-1").hide();
               });
            });
	</script>

	<script type="text/javascript">
		//轮播js
	    var t = n =0, count;
	    $(document).ready(function(){ 
	    count=$("#banner_list a").length;
	    $("#banner_list a:not(:first-child)").hide();
	    $("#banner li").click(function() {
	    var i = $(this).text() -1;//获取Li元素内的值，即1，2，3，4
	    n = i;
	    if (i >= count) return;
	    $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
	    document.getElementById("banner").style.background="";
	    $(this).toggleClass("on");
	    $(this).siblings().removeAttr("class");
	    });
	    t = setInterval("showAuto()", 4000);
	    $("#banner").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 4000);});
	    })

	    function showAuto()
	      {
	      n = n >=(count -1) ?0 : ++n;
	      $("#banner li").eq(n).trigger('click');
	      }
  	</script>
	<style type="text/css">
		/*公共css样式*/
		div,ul,li,h1,h2,h3,h4,h5,h6,a,span{margin: 0px;padding: 0px;}
		ul{list-style: none;}

		body{width: 1226px;margin:0px auto;background-color: #fff;}
		div.site-bn-bar{width: 100%;height: 100px;background-color: #DD343B;}
		div.site-bn-bar ul li{width: 100%;line-height: 100px;}
		div.site-bn-bar ul li a{width: 100%;color:#fff;text-decoration:none;text-align: center;font-size: 50px;display: block;}
		/*导航条*/
		div.site-topbar{width: 100%;height: 40px;background-color: #333333;}
		div.site-topbar-left{width: 50%;height: 40px;float: left;margin-left: 40px;}
		
		div.site-topbar-left ul li{width: 60px;float: left;line-height: 40px;padding-left: 15px;}
		div.site-topbar-left ul li.lot{width: 30px;float: left;line-height: 40px;padding-left: 15px;}
		div.site-topbar-left ul li.miu{width: 40px;float: left;line-height: 40px;padding-left: 15px;}
		div.site-topbar-left ul li.yun{width: 40px;float: left;line-height: 40px;padding-left: 15px;}
		div.site-topbar-left ul li.jin{width: 30px;float: left;line-height: 40px;padding-left: 15px;}
		div.site-topbar-left ul li.you{width: 30px;float: left;line-height: 40px;padding-left: 15px;}
		div.site-topbar-left ul li a{width: 60px;color:#7D7D7D;text-decoration:none;text-align: center;font-size: 10px;}
		div.site-topbar-left ul li a:hover{color:#fff;}
		
		div.site-topbar-right{width: 23%;height: 40px;float: right;margin-right: 40px;}
		div.site-topbar-right ul li{width: 40px;float: left;line-height: 40px;padding-left: 15px;}
		div.site-topbar-right ul li.gou{width: 100px;float: right;line-height: 40px;padding-left: 15px;}
		div.site-topbar-right ul li.gou:hover{background-color: #fff;}
		div.site-topbar-right ul li.gou a:hover{color:red;}
		div.site-topbar-right ul li a{width: 60px;color:#7D7D7D;text-decoration:none;text-align: center;font-size: 10px;}
		div.site-topbar-right ul li a:hover{color:#fff;}
		div.site-topbar-right ul li img{margin: 10px;float: left;}
		div.site-topbar-right-gou{width:280px;height:100px;border:1px solid #ddd;float:right;margin-right: 40px;display: none;line-height: 100px;text-align: center;font-size: 10px;background-color: #fff;position: absolute;right:40px;margin-top:40px;z-index: -1;}
		div.site-topbar-right-gou.gou2{display: none;height: 100px;}
		/*商品导航条*/
		div.site-header{width: 100%;height: 100px;background-color: #fff;background: url("./images/search.png") no-repeat 1145px 35px;}
		div.header0{width: 5%;height: 100px;margin-left: 5%;float: left;}
		div.header0 img{padding-top: 25px;}
		div.header1{width: 60%;height: 100px;margin-left: 5%;float: left;}
		div.header1 ul li{width: 50px;float: left;padding-left: 10px;line-height: 100px;}
		div.header1 ul li.hard{width: 60px;}
		div.header1 ul li a{font-size: 15px;text-decoration: none;color: black;}
		div.header1 ul li a:hover{color: red;}
		
		div.header2{width:15%;height: 50px;margin-top:25px;margin-right:80px;border:1px solid #ddd;font-size:15px;
			color:#ddd;float: right;text-align: center;line-height: 50px;}

		div.header1-1{width:1226px;clear: both;display: none;position: absolute;z-index: -1;margin-top: 100px;border-top:1px solid #ddd;border-bottom:1px solid #ddd;background-color:#fff;}
		div.header1-1 ul li{float: left;text-align: center;margin-left:40px;font-size: 15px;}
		div.header1-1 ul li a{text-decoration: none;}
		div.header1-1 ul li span{display: block;margin-left:40px;margin-right: 40px;margin-bottom: 10px; padding-bottom: 3px; border:1px solid red;font-size: 10px;color: red;}
		div.header1-1 ul li h6{color: red;}

		div.h{clear: both;}

		#banner{width: 100%;height: 580px;float: left;}
		#banner { position: relative;overflow: hidden; }
		#banner_list img { border: 0px;text-align: center; }
		#banner_text { position: absolute; z-index: 0; width: 120px; right: 3px; bottom: 3px; }
		#banner ul { position: absolute; z-index: 0; list-style-type: none; filter: Alpha(Opacity=80); opacity: 0.8; margin: 0; padding: 0; bottom: 3px; right: 5px; }
		#banner ul li { padding: 0px 8px; float: left; display: block; color: #FFF; background: #6f4f67; cursor: pointer; border: 1px solid #333; }
		#banner ul li.on { background-color: #000; }
		#banner_list a { position: absolute; }

		div.content{width: 100%;}
		div.h1{clear:both;width: 100%;height: 80px;background-color: #F5F5F5;}
		div.h1 h3{line-height: 80px;}
		div.content-1{width: 100%;}
		div.content-1 ul li{float: left;margin-bottom: 10px;}
		div.content-1 ul li:hover{margin-bottom:15px;box-shadow: 0px 15px 0px 0px #ddd}
		div.content-1 ul li img{float: left;}
		div.content-1 ul li h1{float: left;color: black; line-height:40px;padding-left: 100px;margin-top:100px;margin-right: 50px;}
		div.content-1 ul li h6{float: left;color: #ddd; line-height:40px;padding-left: 100px;margin-right: 50px;}
		div.content-1 ul li h4{float: left;color: red; line-height:40px;padding-left: 100px;margin-right: 50px;}

		div.content-2{width: 100%;}
		div.content-2 ul li{float: left;}
		div.content-2 ul li:hover{margin-bottom:15px;box-shadow: 0px 15px 0px 0px #ddd}
		div.content-2 ul li.content-2-left{margin-right: 20px;}
		div.content-2 ul li.content-2-right{margin-left: 6px;}
		div.content-2 ul li a{text-decoration: none;}
		div.content-2 ul li h1{color: black; padding-left: 50px;font-size: 30px;color: #FF34B3}
		div.content-2 ul li h6{color: #ddd;padding-top: 5px;padding-bottom:10px; padding-left: 50px;}
		div.content-2 ul li h4{color: red; padding-left: 500px;margin-top: -30px;margin-bottom: 20px;}
		
		div.site-info{width:100%;background-color: #FAFAFA}


	</style>
</head>
<body>
	<!-- 导航条开始 -->
	<div class="site-bn-bar">
		<ul>
			<li><a href="">每周五超级秒杀日</a></li>
		</ul>
	</div>
	<div class="site-topbar">
		<div class="site-topbar-left">
			<ul>
				<li><a href="index.html">小米商城</a></li>
				<li class="miu"><a href="">MIUI</a></li>
				<li class="lot"><a href="">IoT</a></li>
				<li class="yun"><a href="">云服务</a></li>
				<li class="jin"><a href="">金融</a></li>
				<li class="you"><a href="">有品</a></li>
				<li><a href="">小爱平台</a></li>
				<li><a href="">政企服务</a></li>
			</ul>
		</div>
		<div class="site-topbar-right">
			<ul>
				<li class="deng"><a href="">登录</a></li>
				<li class="zhu"><a href="">注册</a></li>
				<li class="xiao"><a href="">消息</a></li>
				<li class="gou"><a href=""><img src="./images/gouwuche2.png" width="20px">购物车(0)</a></li>
			</ul>
		</div>
		<div class="site-topbar-right-gou">
			<div class="gou2">购物车中还没有商品，赶紧选购吧!</div>
		</div>
	</div>
	<div class="site-header">
		<div class="header0">
			<a href="index.html"><img src="./images/logo.png"></a>
		</div>
		<div class="header1">
			<ul>
				<li class="xiaomi"><a href="2.html">小米</a></li>
				<li><a href="2.html">红米</a></li>
				<li><a href="2.html">电视</a></li>
				<li><a href="2.html">笔记本</a></li>
				<li><a href="2.html">空调</a></li>
				<li><a href="2.html">新品</a></li>
				<li><a href="2.html">路由器</a></li>
				<li class="hard"><a href="2.html">智能硬件</a></li>
				<li><a href="2.html">服务</a></li>
				<li><a href="2.html">社区</a></li>
			</ul>
		</div>
		<div class="header2">
			小米8&nbsp小米mix2
		</div>
		<div class="header1-1">
			<ul>
				<li><a href="3.html"><span>新品</span><img src="./images/mi8.png" width="150"><br/>小米8<br/><h6>2999元</h6></a></li>
				<li><a href="3.html"><span>新品</span><img src="./images/t_max3.png" width="150"><br/>小米max3<br/><h6>2999元</h6></a></li>
				<li><a href="3.html"><span>新品</span><img src="./images/t_mi6.jpg" width="150"><br/>小米6<br/><h6>2999元</h6></a></li>
				<li><a href="3.html"><span>新品</span><img src="./images/t_mi8se.png" width="150"><br/>小米8se<br/><h6>2999元</h6></a></li>
				<li><a href="3.html"><span>新品</span><img src="./images/t_mix2.png" width="150"><br/>小米mix2<br/><h6>2999元</h6></a></li>
				<li><a href="3.html"><span>新品</span><img src="./images/t_mix2s.png" width="150"><br/>小米mix2s<br/><h6>2999元</h6></a></li>
			</ul>
		</div>
		<div class="h"></div>
	</div>

	<div id="banner">
		<ul>
		    <li class="on">1</li>
		    <li>2</li>
		  </ul>
		  <div id="banner_list"> 
		  	<a href="3.html" target="_blank"><img src="./images/ban2-1.jpg"/></a> 
		    <a href="3.html" target="_blank"><img src="./images/ban2-2.jpg"/></a> 
		  </div>
	</div>
<!-- 导航条结束 -->
<!-- 内容区开始 -->
	<div class="content">
		<div class="h1">
			<h3>明星产品</h3>
		</div>
		<div class="content-1">
			<ul>
				<li><a href="3.html"><img src="./images/con1.jpg" width="800"><h1>小米8</h1><h6>全球首款双频GPS，骁龙845</h6><h4>2699元起</h4></a></li>
				<li><a href="3.html"><img src="./images/con2.jpg" width="800"><h1>小米8&nbspSE</h1><h6>三星 AMOLED 全面屏 小屏旗舰</h6><h4>1799元起</h4></a></li>
				<li><a href="3.html"><img src="./images/con3.jpg" width="800"><h1>红米6&nbsppro</h1><h6>高颜值大电量 红米旗舰</h6><h4>699元起</h4></a></li>
			</ul>
		</div>
		<div class="content-2">
			<ul>
				<li class="content-2-left"><a href="3.html"><img src="./images/con-hm6.jpg" width="600"><h1>红米6</h1><h6>小屏高性能的双摄手机</h6><h4>799元起</h4></a></li>
				<li class="content-2-right"><a href="3.html"><img src="./images/con-hm6a.jpg" width="600"><h1>红米6A</h1><h6>好用好看不贵</h6><h4>549元起</h4></a></li>
				<li class="content-2-left"><a href="3.html"><img src="./images/con-hs.jpg" width="600"><h1>黑鲨游戏手机 液冷更快</h1><h6>全版本赠179元游戏手柄</h6><h4>2899元起</h4></a></li>
				<li class="content-2-right"><a href="3.html"><img src="./images/con-mix.jpg" width="600"><h1>小米mix2s</h1><h6>陶瓷机身 手机中的艺术品</h6><h4>2899元起</h4></a></li>
			</ul>
		</div>
	</div>
<!-- 内容区结束 -->
<!-- 页脚开始 -->
	<div class="site-footer">
		<img src="./images/foot0.png">
	</div>
<!-- 页脚结束 -->
	<div class="site-info">
		<img src="./images/foot.png">
	</div>
	
</body>
</html>